<template>
	<div class="container">
		<el-card>
			<!-- 面包屑导航 -->
			<div slot="header">
				<el-breadcrumb separator-class="el-icon-arrow-right">
				  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				  <el-breadcrumb-item>内容管理</el-breadcrumb-item>
				</el-breadcrumb>
			</div>

			<!-- 查询表单 -->
			<el-form ref="form" :model="queryInfo" label-width="80px" border stripe size="mini">
				<el-form-item label="状态：">
					<el-radio-group v-model="queryInfo.status">
						<el-radio :label="null">全部</el-radio>
						<el-radio :label="0">草稿</el-radio>
						<el-radio :label="1">待审核</el-radio>
						<el-radio :label="2">审核通过</el-radio>
						<el-radio :label="3">审核失败</el-radio>
						<el-radio :label="4">已删除</el-radio>
					</el-radio-group>
				</el-form-item>
			  <el-form-item label="频道：">
			    <el-select v-model="queryInfo.channel_id" placeholder="请选择">
						<el-option
							label="全部"
							:value="null"
							></el-option>
			      <el-option
							v-for="(item, i) in channels"
							:key="i"
							:label="item.name"
							:value="item.id"
							></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="日期：">
				 <el-date-picker
					 v-model="dateRange"
					 type="daterange"
					 range-separator="至"
					 start-placeholder="开始日期"
					 end-placeholder="结束日期"
					 format="yyyy-MM-dd"
					 value-format="yyyy-MM-dd"
					 @change="pickerChanged" />
			  </el-form-item>
			  <el-form-item size="large">
			    <el-button type="primary" size="mini" @click="_loadArticles" :disabled="loading">筛选</el-button>
			  </el-form-item>
			</el-form>
		</el-card>

		<el-card
			v-loading="loading">
			<div slot="header">
				<p>根据筛选条件共查询到 {{total}} 条结果：</p>
			</div>

			<!-- 表格区域 -->
			<el-table
				:data="articles"
				stripe>
				<el-table-column
					label="封面">
					<template slot-scope="scope">
						<!-- <img
							v-if="scope.row.cover.images[0]"
							:src="scope.row.cover.images[0]"
							class="article-cover" />
						<img
							v-else
							src="./images/error.gif"
							class="article-cover" /> -->
						<el-image
							style="width: 150px; height: 100px"
							:src="scope.row.cover.images[0]"
							fit="cover"
							lazy>
							 <div slot="error" class="image-slot">
									<img src="./images/error.gif" class="article-cover" />
							 </div>
							 <div slot="placeholder" class="image-slot">
								 加载中<span class="dot">...</span>
							 </div>
						</el-image>
					</template>
				</el-table-column>
				<el-table-column
					prop="title"
					label="标题">
				</el-table-column>
				<el-table-column
					label="状态">
					<template slot-scope="scope">
						<el-tag :type="articlesStatus[scope.row.status].type">{{articlesStatus[scope.row.status].label}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					prop="pubdate"
					label="发布时间	">
				</el-table-column>
				<el-table-column
					label="操作">
					<template slot-scope="scope">
						<el-button
							type="primary"
							icon="el-icon-edit"
							circle
							@click="editArticle(scope.row.id)"></el-button>
						<el-button
							type="danger"
							icon="el-icon-delete"
							circle
							@click="removeArticle(scope.row.id)"></el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页器 -->
			<div class="pagination">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="queryInfo.page"
					:page-sizes="[5, 10, 15, 20]"
					:page-size="queryInfo.per_page"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					background>
				</el-pagination>
			</div>

		</el-card>
	</div>
</template>

<script>
	import {
		getArticles,
		getArticlesLocal,
		getChannels,
		delteArticle
	} from '@/api/article.js'
	export default {
	 data () {
			return {
				// 查询数据对象
				queryInfo: {
					// 文章状态
					status: null,
					// 频道id
					channel_id: null,
					// 起始时间
					begin_pubdate: null,
					// 截止时间
					end_pubdate: null,
					// 页数
					page: 1,
					// 每页数量
					per_page: 10
				},
				// 总页数
				total: 30,
				// 数据时间
				dateRange: [],
				// 文章数据数组
				articles: [],
				// 文章状态数组
				articlesStatus: [
					{ status: 0, label: '草稿', type: 'info' },
					{ status: 1, label: '待审核', type: 'primary' },
					{ status: 2, label: '审核通过', type: 'success' },
					{ status: 3, label: '审核失败', type: 'warning' },
					{ status: 4, label: '已删除', type: 'danger' }
				],
				// 文章频道数据数组
				channels: [],
				// 加载
				loading: true
			}
		},
		created () {
			// 失效的文章接口调用
			// this._loadArticles()
			this._loadChannels()
			// 本地文章接口调用
			this._loadArticlesLocal()
		},
		methods: {
			// 获取文章列表接口失效，本地数据模拟
			_loadArticlesLocal () {
				// 开启加载中
				this.loading = true
				getArticlesLocal().then(({ data: res }) => {
					// 拿到数据
					this.articles = res
					// 关闭加载中
					this.loading = false
				})
			},
			// 获取文章列表
			_loadArticles () {
				// 开启加载中
				this.loading = true
				// 获取查询数据
				const queryInfo = this.queryInfo
				getArticles(queryInfo).then(({ data: res }) => {
					// 拿到数据
					this.articles = res.data.result
					// 拿到总条数
					this.total = res.data.total_count
					// 关闭加载中
					this.loading = false
				}).catch(err => {
					// 获取失败提示
					this.$message.error('请求数据失败：' + err)
					// 关闭加载中
					this.loading = false
				})
			},
			// 获取频道
			_loadChannels () {
				getChannels().then(({ data: res }) => {
					this.channels = res.data.channels
				})
			},
			// 分页器事件-每页条数
			handleSizeChange (newSize) {
				console.log(newSize)
				this.queryInfo.per_page = newSize
				this._loadArticles()
			},
			// 分页器事件-第几页
			handleCurrentChange (newPage) {
				console.log(newPage)
				this.queryInfo.page = newPage
				this._loadArticles()
			},
			// 时间选择器改变事件
			pickerChanged () {
				// 有选中时间就赋值
				if (this.dateRange) {
					this.queryInfo.begin_pubdate = this.dateRange[0]
					this.queryInfo.end_pubdate = this.dateRange[1]
				} else {
					// 没有就重置为空
					this.queryInfo.begin_pubdate = null
					this.queryInfo.end_pubdate = null
				}
			},
			// 文章删除
			async removeArticle (id) {
				console.log(id)
				console.log(id.toString())
				// 接收返回值
				 const confirmResult = await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)

				// 判断操作
				if (confirmResult !== 'confirm') return this.$message.info('你点击了取消按钮!')

				// 调用请求
				// 传过来的 id 是经过JOSNBig处理过的 用 toString 方法转换为字符串
				delteArticle(id.toString()).then(res => {
					this.$message.success('删除成功！!')
					// 从新获取数据
					this._loadArticles()
				}).catch(err => {
					this.$message.error('删除失败！!' + err)
				})
			},
			// 编辑文章
			editArticle (id) {
				this.$router.push('/publish?id=' + id.toString())
			}
		}
	}
</script>

<style lang="less" scoped>

	.pagination{
		display: flex;
		justify-content: flex-end;
	}

	.article-cover{
		width: 100%;
		height: 100;
		object-fit: contain;
	}

	.image-slot{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
